<template>
  <div style="margin-left: 10px">
    <a-button @click="getIPCs">刷新摄像机列表</a-button>
    摄像机
    <a-select style="width: 20%" v-model="thingID" @select="onSelect">
      <a-select-option
        v-for="(item, index) in ipcs"
        :key="index"
        :value="item.uid"
        >{{ item.s_name }}</a-select-option
      >
    </a-select>
    码流
    <a-input v-model="videoAddr" style="width: 220px"></a-input>
    <a-button :disabled="videoAddr == ''" @click="play">播放</a-button>
  </div>
</template>
<script>
let flvjs = require("@/services/player/flv.js");
import { getVideoOptions, getThingView } from "@/services/dataAPI";
import { get, rawGet } from "@/services/crud.js";
import { download } from "@/utils/file.js"
import Axios from "axios";
export default {
  data() {
    return {
      thingID: "",
      videoAddr: "",
      videoStream: {},
      flvPlayer: null,
      state: "",
      ipcs: [],
    };
  },
  watch: {
    "activeBox.tid": {
      handler(nv, ov) {
        console.log("***********", nv, ov);
        this.getIPCs();
      },
    },
  },
  computed: {
    activeBox() {
      return this.$store.state.thingView.activeThing;
    },
  },

  methods: {
    getIPCs() {
      let athing = this.activeBox;
      if (athing) {
        let self = this;
        this.thingID = "";
        rawGet(
          "api/extend/api/m_smartBoxForPolice?qmap[ctype]=thing_ex&qmap[box_id]=" +
            athing.tid
        ).then((res) => {
          if (
            res &&
            res.data &&
            res.data.result &&
            Array.isArray(res.data.result)
          ) {
            let cameras = res.data.result;
            let ipcs = [];
            cameras.forEach((c) => {
              if (c && c.uid && c.rtsp) {
                ipcs.push(c);
              }
            });
            self.ipcs = ipcs;
            if (self.ipcs && self.ipcs.length > 0) {
              self.thingID = self.ipcs[0].uid;
              self.videoAddr = self.ipcs[0].rtsp;
            }
          }
        });
        /*
        get("station", sid + "?children=true").then((resdev) => {
          if (resdev && resdev.data && resdev.data.result) {
            self.ipcs = resdev.data.result.filter((dev) => {
              return (
                dev.model_id.indexOf("ipc") >= 0 ||
                dev.model_id.indexOf("m_SlTrLORmaPXHeS3Xrocpz") >= 0
              );
            });
            console.log("@@@@@@@@@@@@@@@", self.ipcs);
            if(self.ipcs && self.ipcs.length > 0){
              self.thingID = self.ipcs[0].uid
            }
          }
        });*/
      }
    },
    onSelect() {
      let self = this;
      getThingView(this.thingID).then((res) => {
        if (res && res.data && res.data.result && res.data.result.info) {
          self.state =
            res.data.result.info.state == "" || !res.data.result.info.state
              ? "离线"
              : res.data.result.info.state == "online"
              ? "在线"
              : "离线";
        }
      });
      //this.$store.dispatch("thingView/refreshActiveThing", this.thingID);
    },
    refreshVideoOptions() {
      const _this = this;
      getVideoOptions(this.thingID).then((option) => {
        _this.videoStream = option;
        _this.videoAddr = undefined;
      });
    },

    play() {
      let localAddr = "";
      if (process.env.NODE_ENV === "development") {
        localAddr = "playVideo"
      } else {
        localAddr = "http://127.0.0.1:18869/playVideo";
      }
      Axios.get(localAddr)
        .then((res) => {
          console.log("video plugin ok",res);
          Axios.put(localAddr, { Addr: this.videoAddr });
        })
        .catch(() => {
          this.$confirm({
            title: "下载视频播放插件",
            content: "请下载视频播放插件，该插件将为您建立视频服务",
            icon: "exclamation-circle",
            onOk: () => {
              console.log("点击确认");
              window.open("api/file/videopluginIOTBASE.exe")
            },
            onCancel() {},
          });
        });
    },
    stop() {
      if (this.flvPlayer) {
        this.flvPlayer.pause();
        this.flvPlayer.unload();
        this.flvPlayer.detachMediaElement();
        this.flvPlayer.destroy();
        this.flvPlayer = null;
      }
    },
  },
};
</script>
